<template>
	<div class="box">
		<Head @chufa="OnOff"></Head>
		<el-row class="ShaiXuan">
			<el-col :span="6">
				<div @click="Sizer.IntelligentSorting=!Sizer.IntelligentSorting"><span>智能排序</span>&ensp;<i class="el-icon-caret-bottom icon"></i></div>
			</el-col>
			<mt-popup v-model="Sizer.IntelligentSorting" class="paixu" position="bottom">
				<ul>
					<li v-for="item in PX" :key="item.PXID"><a @click.prevent="PaiXu(item.PXID)" href="">{{item.name}}</a></li>
				</ul>
			</mt-popup>
			<el-col :span="6">
				<div>
					<router-link to="/Brand"><span>品牌</span>&ensp;<i class="el-icon-caret-bottom icon"></i></router-link>
				</div>
			</el-col>
			<el-col :span="6">
				<div @click="Sizer.isPrice=!Sizer.isPrice"><span>价格</span>&ensp;<i class="el-icon-caret-bottom icon"></i></div>
			</el-col>
			<mt-popup v-model="Sizer.isPrice" class="paixu3" position="bottom">
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p1'">无限</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p2'">3万以下</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p3'">3-5万</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p4'">5-7万</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p5'">7-9万</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p6'">9-12万</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p7'">12-16万</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p8'">16-20万</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple" @click="pp='p9'">20万以上</div>
					</el-col>
				</el-row>
			</mt-popup>
			<el-col :span="6">
				<div @click=""><span>筛选</span>&ensp;<i class="el-icon-caret-bottom icon"></i></div>
			</el-col>
		</el-row>
		<CarList :unfold="unfold" :bodys="bodys"></CarList>
		<mt-popup v-model="popupVisible" :modal="false" class="tishi" position="top">
			<input v-model="tishiyu" />
		</mt-popup>

	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import CarList from '@/components/CarList.vue'
	import { search } from '../api/jsoup'
	import eventBus from '../api/eventBus'
	export default {
		name: 'BuyCars',
		components: {
			Head,
			CarList
		},
		data() {
			return {
				Sizer: {
					IntelligentSorting: false,
					isPrice: false
				},
				bodys: undefined,
				unfold: 1,
				pp: "",
				popupVisible: false,
				tishiyu: "暂无相关车型",
				PXstatus: "PX1",
				PX: [{
						name: "智能排序",
						PXID: "PX1"
					}, {
						name: "最新上架",
						PXID: "PX2"
					},
					{
						name: "价格最低",
						PXID: "PX3"
					},
					{
						name: "价格最高",
						PXID: "PX4"
					},
					{
						name: "车龄最短",
						PXID: "PX5"
					},
					{
						name: "里程最少",
						PXID: "PX6"
					}
				],
			}
		},
		methods: {
			_search:function(data){
				search(data,this.__search);
			},
			__search:function(data){
				
				let res = eval("(" + data + ")");
				this.bodys = res[0];
				this.popupVisible = true;
				this.tishiyu = this.bodys.length ? `共为您找到${this.bodys.length}辆车` : "暂无相关车源，换个筛选条件试试吧~";
				setTimeout(() => {
					this.popupVisible = false;
				}, 3000);
			},
			//改变浏览的方式
			OnOff() {
				if (this.unfold == 1) {
					this.unfold = 2
				} else {
					this.unfold = 1
				}
			},
			//改变提示语的状态
			tishi() {
				this.popupVisible = true
				setTimeout(() => {
					this.popupVisible = false
				}, 3000)
			},
			PaiXu(PXID) {
				switch (PXID) {
					case "PX1":
						this.bodys.reverse()
						break;
					case "PX2":
						// 时间撮从大到小
						this.bodys.sort(function(a, b) {
							return b.time - a.time;
						});
						break;
					case "PX3":
						// 价格从小到大
						this.bodys.sort(function(a, b) {
							return a.price - b.price;
						});
						break;
					case "PX4":
						// 价格从大到小
						this.bodys.sort(function(a, b) {
							return b.price - a.price;
						});
						break;
					case "PX5":
						// 车龄从小到大
						this.bodys.sort(function(a, b) {
							return b.DrivingYears - a.DrivingYears;
						});
						break;
					case "PX6":
						// 里程从小到大
						this.bodys.sort(function(a, b) {
							return a.ActualServiceLife - b.ActualServiceLife;
						});
						break;
					default:

						break;
				}
				this.Sizer.IntelligentSorting = !this.Sizer.IntelligentSorting
				this.PXstatus = PXID
			}
		},
		watch: {
			pp: function() {
				if (this.pp != undefined) {
					this.bodys = this.body;
					this._search({start:0,num:20,keys:this.pp,table:"brief"});
		
				} else {
					this.tishiyu = `共为您找到${this.bodys.length}辆车`;
				}
				this.tishi()
				this.Sizer.isPrice = false
				this.jiaZai();
			},
			bodys: function() {
				if (this.bodys == "") {
					this.bodys = this.body;
					this.tishi();
				}

			}
		},
		mounted() {
			//拿到传过来的路由值
			this.pp = this.$route.params.pp
			this.bodys = this.body
			this._search({start:0,num:20,keys:this.pp,table:"brief"});
			let thi = this;
			eventBus.on("keys",(data)=> {
				this.bodys = this.body;
				thi._search({start:0,num:20,keys:data,table:"brief"});
			});
		}

	}
</script>

<style>
	.icon {
		font-size: 10px;
	}

	.ShaiXuan {
		text-align: center;
	}

	.ShaiXuan span {
		font-size: 12px;
		line-height: 41px;
		color: #333;
	}

	.ShaiXuan .paixu {
		width: 100%;
	}

	.ShaiXuan .paixu li a {
		display: block;
		height: 2.6875rem;
		line-height: 2.6875rem;
		font-size: 0.875rem;
	}

	.ShaiXuan .paixu li a:hover {
		color: #22ac38;
	}

	.ShaiXuan .paixu3 {
		width: 100%;
	}

	.ShaiXuan .paixu3 div {
		height: 3.125rem;
		line-height: 3.125rem;
		font-size: 0.875rem;
	}

	.tishi {
		width: 100%;
		text-align: center;
		background-color: rgba(0, 0, 0, .7);
		backface-visibility: hidden;
		line-height: 2.1875rem;
		color: #fff;
		font-size: 0.875rem;
	}

	.tishi input {
		background: none;
		color: #FFFFFF;
		width: 100%;
		text-align: center;
	}
</style>
